<template>
  <div>
    <panle title='客户标签' content="客户标签"></panle>
    <!--标签-->
    <div>
      <div class="first_content">
        <!--筛选条件-->
        <div class="shaixuan">
          <el-button type="primary" size="mini"
                     @click="createdYanjincigroup">+创建客户标签
          </el-button>
          <el-button type="primary" size="mini" @click="syncClient()">同步</el-button>
        </div>

        <div class="first_table">
          <el-row>
            <el-col :span="24">
              <div class="yixuan"></div>
            </el-col>
          </el-row>
          <el-table :data="tableDatagroup" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe
                    default-expand-all v-loading="loadinggroup">
            <el-table-column prop="group_name" label="名称"></el-table-column>
            <el-table-column prop="id" label="操作">
              <template slot-scope="scope">
                <PersButton v-if="scope.row.is_api == 1" type="text" size="mini" label="编辑" icon="fa fa-pencil"
                            perms="scrm:tag:list:edit" @click="editgroup(scope.row)"></PersButton>
                <PersButton type="text" size="mini" icon="el-icon-search" label="查看" perms="scrm:tag:list:see"
                            @click="seegroup(scope.row)"></PersButton>
                <PersButton v-if="scope.row.is_api == 1" type="text" size="mini" icon="el-icon-delete" label="删除"
                            perms="scrm:tag:list:del" @click="delgroup(scope.row)"></PersButton>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination @size-change="handleSizeChangegroup" @current-change="handleCurrentChangegroup"
                           :current-page="pageNumbergroup" :page-sizes="[10, 50, 100, 200]" :page-size="pageSizegroup"
                           background layout="total, sizes, prev, pager, next, jumper" :total="totalgroup">
            </el-pagination>
          </div>
        </div>
        <!--弹出层  编辑标签-->
        <el-dialog v-dialogDrag :visible.sync="opengroup" width="600px" append-to-body
                   :title="'编辑客户标签'">
          <el-form ref="form" :model="formgroup" label-width="80px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="标签组名" prop="group_name">
                  <el-input style="width:50%" v-model="formgroup.group_name" placeholder="请输入客户标签名称"
                            size="small"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="opengroup = false" size="small">取消</el-button>
            <el-button type="primary"
                       @click="subEditFormgroup(formgroup)" size="small">确定
            </el-button>
          </div>
        </el-dialog>
        <!--                新开发新增-->
        <el-dialog v-dialogDrag :visible.sync="subopengroup" width="600px" append-to-body :title="'创建客户标签'">
          <el-form ref="dynamicValidateForm" :model="dynamicValidateForm" label-width="80px">
            <el-form-item
                prop="group_name"
                label="标签组名"
                :rules="[
                              { required: true, message: '请输入标签组名', trigger: 'blur' }
                            ]"
            >
              <el-input v-model="dynamicValidateForm.group_name"></el-input>
            </el-form-item>
            <el-form-item
                v-for="(domain, index) in dynamicValidateForm.domains"
                :label="'子标签名'"
                :key="domain.key"
                :prop="'domains.' + index + '.value'"
                :rules="{
                                required: true, message: '子标签名不能为空', trigger: 'blur'
                            }"
            >
              <el-input v-model="domain.value"></el-input>
              <el-button v-if="index != 0" @click.prevent="removeDomain(domain)">删除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(dynamicValidateForm)">提交</el-button>
              <el-button @click="addDomain">新增子标签</el-button>
              <el-button @click="resetForm1('dynamicValidateForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <!--弹出层  查看标签-->
        <el-dialog v-dialogDrag :visible.sync="opengroupsub" width="800px" append-to-body :title="'查看子标签标签'">
          <el-button type="primary" size="mini"
                     @click="createdtaggroup(tagsub)">+创建客户子标签
          </el-button>
          <div class="first_table">
            <el-row>
              <el-col :span="24">
                <div class="yixuan"></div>
              </el-col>
            </el-row>
            <el-table :data="tagsub" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe
                      default-expand-all v-loading="loadinggroupsub">
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="id" label="操作">
                <template slot-scope="scope">
                  <PersButton v-if="scope.row.is_api == 1" type="text" size="mini" label="编辑" icon="fa fa-pencil"
                              perms="scrm:tag:list:editsub"
                              @click="editgroupsub(scope.row)"></PersButton>
                  <PersButton v-if="scope.row.is_api == 1" type="text" size="mini" icon="el-icon-delete"
                              perms="scrm:tag:list:delsub"
                              label="删除" @click="delgroupSub(scope.row)"></PersButton>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination @size-change="handleSizeChangegroupSub"
                             @current-change="handleCurrentChangegroupSub"
                             :current-page="pageNumbergroupSub" :page-sizes="[10, 50, 100, 200]"
                             :page-size="pageSizegroupSub"
                             background layout="total, sizes, prev, pager, next, jumper"
                             :total="totalgroupSub">
              </el-pagination>
            </div>
          </div>
        </el-dialog>

        <!--弹出层  子标签新增-->
        <el-dialog v-dialogDrag :visible.sync="opentagsub" width="600px" append-to-body
                   :title="'新增客户子标签'">
          <el-form ref="form" :model="formgroup" label-width="80px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="标签组名" prop="group_name">
                  <el-input style="width:50%" v-model="formgroup.group_name" placeholder="请输入客户标签名称"
                            size="small"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="opentagsub = false" size="small">取消</el-button>
            <el-button type="primary"
                       @click="createtag(formgroup)" size="small">确定
            </el-button>
          </div>
        </el-dialog>
      </div>

    </div>
  </div>
</template>

<script>
import {getClientDetail, getClientIdList} from "@/api/scrm/client/clientList";
import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {
  getQwTag,
  updateQWTag,
  createQwTag,
  delQwTag,
  getQwTagSub,
  createtagsub,
  synchronizeTags,
  synchronizeTagsSub
} from '@/api/scrm/tag/tag';
import {hasPermission, isShow} from '@/common/permission'

export default {
  components: {
    Panle,
    PersButton
  },
  data() {
    return {
      sync_number: 0,
      dynamicValidateForm: {
        domains: [{
          value: ''
        }],
        group_name: ''
      },
      subopengroup: false,
      opentagsub: false,
      loadinggroup: false,
      loadinggroupsub: false,
      tableDatagroup: [],
      multipleSelectiongroup: [],
      pageSizegroup: 10, //一页显示多少条
      pageNumbergroup: 1,
      totalgroup: 0, //总页数
      pageSizegroupSub: 10, //一页显示多少条
      pageNumbergroupSub: 1,
      totalgroupSub: 0, //总页数
      fileList2: [],
      flagid2: '',
      filelist: [],
      dialogVisible: false,
      disabled: false,
      activeName: 'first',
      open2: false,

      opengroup: false,
      opengroupsub: false,
      formgroup: {
        "id": '',
        "group_name": '',
      },
      tagsub: [],
      tagpid: '',
      clickType: false,
      imgnum: 1, //选择图片数量
    }
  },
  created() {
    const now = new Date()
    this.sync_number = now.getTime()

    this.init();
  },
  methods: {
    hasPermission,
    isShow,
    resetForm(formName) {
      this.init();
    },
    handleClick(tab, event) {
    },
    init: function () {
      this.loadinggroup = true;
      let _param = {
        "pageSize": this.pageSizegroup,
        "pageNumber": this.pageNumbergroup,
      }
      getQwTag(_param).then((res) => {
        this.tableDatagroup = res.data.result;
        this.totalgroup = res.data.totalgroup;
        this.loadinggroup = false;
      })
    },
    handleSizeChangegroup: function (e) {
      this.pageSizegroup = e;
      this.init();
    },
    handleCurrentChangegroup: function (e) {
      this.pageNumbergroup = e;
      this.init();
    },
    handleSizeChangegroupSub: function (e) {
      this.pageSizegroupSub = e;
      let data = {
        group_id: this.tagsub[0].group_id
      }
      this.seegroup(data);
    },
    handleCurrentChangegroupSub: function (e) {
      this.pageNumbergroupSub = e;
      let data = {
        group_id: this.tagsub[0].group_id
      }
      this.seegroup(data);
    },

    //创建表单
    createdYanjincigroup: function (e) {
      this.subopengroup = true;
    },
    createdtaggroup: function (e) {
      this.formgroup = {
        "group_name": '',
        "group_id": e[0].group_id,
        "tagname": '',
      }
      this.opentagsub = true;
    },


    //提交表单  创建
    submitFormgroup: function (e) {
      createQwTag(this.formgroup).then((res) => {
        if (res.code == 200) {
          this.msgSuccess(res.msg);
          this.init();
          this.opengroup = false;
          this.opengroupsub = false;
        } else {
          this.msgError(res.msg);
        }
      })


    },
    subEditFormgroup: function (e) {
      let data = {
        "group_name": e.group_name,
        "id": e.id,
      }
      updateQWTag(data).then((res) => {
        if (res.code == 200) {
          this.msgSuccess(res.msg);
          this.init();
        } else {
          this.msgError(res.msg);
          this.opengroup = false;
        }
        this.loadinggroup = false;
        this.opengroup = false;
        this.opengroupsub = false;

      })
    },

    delgroup: function (data) {
      let name = data.group_name ? data.group_name : data.name
      this.$confirm('确定删除【' + name + '】标签吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _param = {
          'tag_id': data.tid ? data.tid : '',
          'group_id': data.group_id ? data.group_id : ''
        }
        delQwTag(_param).then((res) => {
          if (res.code == 200) {
            this.msgSuccess(res.msg);
            this.init();
          } else {
            this.msgError(res.msg);
          }
        })

        this.opengroupsub = false;
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    delgroupSub: function (data) {
      let name = data.group_name ? data.group_name : data.name
      this.$confirm('确定删除【' + name + '】标签吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _param = {
          'tag_id': data.tid,
          'group_id': ''
        }
        delQwTag(_param).then((res) => {
          if (res.code == 200) {
            this.msgSuccess(res.msg);
            this.init();
          } else {
            this.msgError(res.msg);
          }
        })

        this.opengroupsub = false;
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    editgroup: function (data) {
      this.formgroup.id = data.group_id;
      let editForm = {
        "group_name": data.group_name,
      }
      Object.assign(this.formgroup, editForm);
      this.opengroup = true;
    },
    editgroupsub: function (data) {
      this.formgroup.id = data.tid;
      let editForm = {
        "group_name": data.name,
      }
      Object.assign(this.formgroup, editForm);
      this.opengroup = true;
    },
    seegroup: function (data) {
      this.loadinggroupsub = true;
      let _param = {
        "pageSize": this.pageSizegroupSub,
        "pageNumber": this.pageNumbergroupSub,
        "group_id": data.group_id,
      }
      getQwTagSub(_param).then((res) => {
        this.tagsub = res.data.result;
        this.totalgroupSub = res.data.totalgroup;
      })
      this.opengroupsub = true;
      this.loadinggroupsub = false;
    },
    //新添加
    submitForm(formName) {
      createQwTag(formName).then((res) => {
        if (res.code == 200) {
          this.msgSuccess(res.msg);
          this.init();
          this.subopengroup = false;
          this.opengroupsub = false;
        } else {
          this.msgError(res.msg);
        }
      })

    },
    createtag(formgroup) {
      let _param = {
        "group_id": formgroup.group_id,
        "group_name": formgroup.group_name,
      }
      createtagsub(_param).then((res) => {
        if (res.code == 200) {
          this.msgSuccess(res.msg);
          this.init();
          this.opentagsub = false;
          this.opengroupsub = false;
        } else {
          this.msgError(res.msg);
        }
      })

    },
    resetForm1(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      });
    },
    syncClient() {
      const now = new Date()
      let sync_set_number = now.getTime()
      if (sync_set_number - this.sync_number < 60000) {
        this.$message.error('每分钟内只能同步一次')
        return
      }
      this.loadinggroup = true;
      synchronizeTags().then((res) => {
        let _param = {
          "tagsWare": res.data.tagsWare,
          "tagruoup": res.data.tagruoup,
          "groupWhere": res.data.groupWhere,
        }
        synchronizeTagsSub(_param).then((res) => {
          this.$message.success('同步成功')
          this.init();
          this.loadinggroup = false
        })
      })
    },

  }
}

</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.shaixuan {
  display: flex;
  flex-flow: nowrap;
  align-content: center;
  margin-top: 15px;
}

.first_content {
  display: flex;
  flex-flow: nowrap;
  flex-direction: column;
  align-content: center;
}

.uploadcol {
  display: flex;
  flex-flow: column;
  width: 100px;
}

.uploadborder {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 100px;
  height: 100px;
}

.addshuziren_btn {
  position: absolute;
  right: 0;
  margin-right: 20px;
}

.daorushuziren_btn {
  position: absolute;
  right: 0;
  margin-right: 160px;
}

.yixuan {
  margin: 20px;
  color: #787878;
}
</style>